<template>
  <div id="app">
    <input type="checkbox" name="" id="" value="" v-model="check" /><span
      >选择</span
    >
    <input type="text" v-bind:value="num" />
    <a :href="url">baidu</a>
    <!-- v-on用于绑定事件 -->
    <!-- v-on语法：v-on:事件用于触发类型 -->
    <button v-on:click="num += 1">+1</button>
    <button v-on:click="fn()">1</button>
    <input type="text" v-model="n" />
    <!-- 传递参数 -->
    <button @click="fn2(n)">n</button>
    <button v-on:click="num--" @click="fn2(n)">{{ a }}</button><br /><br />
    <!-- ------------------------------------------------------->
    <!-- ----------------v-on:click-----@click------------------>
    <!-- ------------------------------------------------------->
    <button class="btn" @click="salary(0)">发工资啦，我的工资是3000</button
    ><br />
    <button class="btn" @click="salary(-2800)">
      给喜欢的女主播刷了火箭-2800</button
    ><br />
    <button class="btn" @click="salary(10000)">送外卖赚了10000</button><br />
    <button class="btn" @click="salary(-18000)">
      给暗恋的女生买了爱马仕-18000</button
    ><br />
    <button class="btn" @click="salary(8000)">晚上去做代驾赚了8000</button
    ><br />
    <button class="btn" @click="salary(-100)">买泡面100</button><br />
    <button class="btn" @click="salary(-50)">买挂逼水50</button>
    <p>我是舔狗，我这个月还有{{ money }}元</p>
    <!-- ------------------------------------------------------->
    <!-- ---------------------@keyup---------------------------->
    <!-- ------------------------------------------------------->
    <input type="text" @keyup="fn" />
    <!-- ------------------------------------------------------->
    <!-- ---------------------@mouseenter----------------------->
    <!-- ------------------------------------------------------->
    <div class="hhh" @mouseenter="fn"></div>
    <!-- ------------------------------------------------------->
    <!-- ------------------------e------------------------------>
    <!-- ------------------------------------------------------->
    <button @click="fn4($event)">EEE</button>
    <!-- ------------------------------------------------------->
    <!-- -------阻止默认事件------------prevent------------------>
    <!-- ------------------------------------------------------->
    <a href="https://www.bilibili.com/" @click="fn4($event)">默认事件</a><br />
    <a href="https://www.bilibili.com/" @click.prevent="">默认事件</a>
    <!-- ------------------------------------------------------->
    <!-- -------阻止事件冒泡------------stop--------------------->
    <!-- ------------------------------------------------------->
    <div class="hhh2" @click="fn()">
      <div class="hhh1" @click.stop="fn()">
        <div class="hhh" @click="fn6($event)"></div>
      </div>
    </div>
    <!-- --------------------课堂练习--------------------------->
    <!-- -------阻止事件冒泡------------stop--------------------->
    <!-- ------------------------------------------------------->
    <form action="http://www.itcast.cn">
      <input type="text" value="" />
      <button @click.prevent.stop="fn6(e)">提交</button>
    </form>
    <!-- --------------------课堂练习---------------------------->
    <!-- --------------------keyup键盘事件----------------------->
    <!-- ------------------------------------------------------->
    <input type="text" value="" @keyup.enter="keyup" /><br />
    <br />
    <!-- --------------------课堂练习--------------------------->
    <!-- --------------------点击反转案例----------------------->
    <div>{{ shuzu }}</div>
    <br />
    <button @click="fanzhuan()">逆转</button><br />
    <hr />
    <!-- ------------------------------------------------------->
    <!-- --------------------v-if/v-show------------------------>
    <!-- ------------------------------------------------------->
    <div class="img1">
      <img src="./assets/img1.webp" alt="" v-show="flag" /><br />
    </div>
    <button @click="kan()">看不看</button>
    <button @click="xiangkan()">想看</button>
    <button @click="bukan()">不看</button>
    <div v-if="flag">我是盒子</div>
    <div v-show="flag1">我是盒子</div>
    <div v-show="age >= 18 ? true : false">不合规内容</div>
    <!-- ------------------------------------------------------->
    <!-- v-if,v-else-if,v-else必须在同一级，否则会报错 -->
    <div v-if="age >= 60">60岁以上，唱跳rap</div>
    <div v-else-if="age >= 30">30岁以上，抽烟喝酒烫头</div>
    <div v-else-if="age >= 20">20岁以上，煮茶焚香下棋</div>
    <div v-else>20岁以下，练习广场舞</div>
    <button @click="hhhage()">我是年龄控制器,{{ age }}</button>
  </div>
</template>

<script>
// 默认导出 (默认暴露)
export default {
  //该vue组件的数据源
  name: 'App',
  data() {
    return {
      num: 60,
      check: false,
      url: 'http://www.baidu.com/',
      n: 2,
      a: 0,
      money: 3000,
      add: '我是垃圾',
      shuzu: 'Hello,world',
      flag: false,
      flag1: true,
      age: 18,
    }
  },
  //用来存放事件，methods是一个对象，里面存放了需要触发的事件
  //是methods，不止一个方法，所以要有s
  //事件和事件之间，隔开
  methods: {
    fn() {
      console.log(1)
    },
    fn2(n) {
      console.log(n)
    },
    fn3(n) {
      this.a = n
    },
    fun1: function () {
      console.log(this)
    },
    fun2: () => {
      console.log(this)
    },
    salary(b) {
      console.log((this.money += b))
    },
    fn4(e) {
      e.preventDefault()
      console.log(e)
    },
    fn5() {
      console.log('1')
    },
    fn6(e) {
      e.stopPropagation()
      console.log('1')
    },
    keyup() {
      console.log('jahia')
    },
    fanzhuan() {
      this.shuzu = this.shuzu.split('').reverse().join('')
    },
    kan() {
      this.flag = !this.flag
    },
    hhhage() {
      this.age += 5
    },
    xiangkan() {
      this.flag = true
    },
    bukan() {
      this.flag = false
    },
  },
}
</script>

<style lang="less">
.box {
  height: 300px;
  width: 300px;
  background-color: rgb(255, 193, 193);
  .son {
    color: rgb(89, 0, 0);
  }
}
.btn {
  width: 250px;
}
.hhh {
  width: 50px;
  height: 50px;
  background-color: pink;
}
.hhh1 {
  width: 150px;
  height: 150px;
  background-color: rgb(180, 0, 30);
  display: flex;
  justify-content: center;
  align-items: center;
}
.hhh2 {
  width: 200px;
  height: 200px;
  background-color: rgb(60, 0, 10);
  display: flex;
  justify-content: center;
  align-items: center;
}
.img1 {
  height: 200px;
  width: 200px;
}
img {
  height: 200px;
  width: 330px;
}
</style>
